<template>
    <div class="main store-package-list">
        <section>
            <div class="header-container">
                <!-- <el-button type="primary" size="mini" @click="chooseGoods">添加商品</el-button>-->
                <el-button type="primary" size="mini" plain @click="chooseGoodsPackage">添加套餐</el-button>
            </div>
            <el-form :model="form" size="medium" ref="form" label-width="0px">
                <el-table :data="form.list.filter(item => (item.deleteFlag===1))" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                    <el-table-column align="center" label="ID" prop="productId" min-width="100"></el-table-column>
                    <el-table-column align="center" label="名称" prop="productName" min-width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.productName || '-'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="类型" prop="productType" width="100">
                        <template slot-scope="scope">
                            {{scope.row.productType===1? '商品' : '套餐'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="价格" prop="productPrice" width="140">
                        <template slot-scope="scope">
                            <el-form-item :prop="'list['+scope.$index+'].productPrice'" :rules="commonRules.priceRule" style="margin: 30px 0">
                                <el-input-number v-model.number="scope.row.productPrice" :max="100000" label="输入价格" :controls="false"></el-input-number>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否为保证金礼包" prop="earnestMoneyProductFlag" width="140">
                        <template slot-scope="scope">
                            <el-form-item :prop="'list['+scope.$index+'].earnestMoneyProductFlag'" style="margin: 30px 0">
                                <el-switch
                                        v-model="scope.row.earnestMoneyProductFlag"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        active-text="是"
                                        inactive-text="否"
                                        :active-value="1"
                                        :inactive-value="0">
                                </el-switch>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="购买等级" prop="productType" width="450">
                        <template slot-scope="scope">
                            <el-form-item :prop="'list['+scope.$index+'].tempProductBuyerRole'" :rules="commonRules.notNullSelectRule" style="margin: 30px 0">
                                <el-checkbox-group v-if="scope.row.earnestMoneyProductFlag" v-model="scope.row.tempProductBuyerRole">
                                    <!--<el-checkbox label="1">门店会员</el-checkbox>
                                    <el-checkbox label="2">门店大区</el-checkbox>-->
                                </el-checkbox-group>
                                <el-checkbox-group v-else v-model="scope.row.tempProductBuyerRole">
                                    <!--<el-checkbox label="1">门店合伙人</el-checkbox>
                                    <el-checkbox label="2">门店大区</el-checkbox>
                                    <el-checkbox label="3">门店合伙人及门店大区下级</el-checkbox>-->
                                    <el-checkbox label="1">门店会员</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否上架" prop="upshelf" width="120">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.upshelf"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="是"
                                    inactive-text="否"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="()=>{scope.row.isSell=(scope.row.upshelf && scope.row.isSell)}">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否售卖" prop="isSell" width="120">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.isSell"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="是"
                                    inactive-text="否"
                                    :active-value="1"
                                    :inactive-value="0"
                                    :disabled="scope.row.upshelf!==1">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" plain @click="scope.row.deleteFlag=0">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="footer-container">
                <el-button type="success" size="mini" :loading="btnLoading" plain @click="save">保 存</el-button>
            </div>
        </section>
    </div>
</template>
<script>
  import differenceBy from 'lodash/differenceBy';
  export default {
    name: 'storePackage',
    data(){
      return {
        listLoading: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 1000,
          isPage: 0
        },
        form: {
          list: []
        },
        btnLoading: false,

        tempGoodsCheck: [],
        tempPackageChecked: []
      }
    },
    created(){
      this.getList();
    },
    methods: {
      getList(){
        this.listLoading = true;
        this.request({
          url: '/bsnl-activity/storePartnerProduct/goods/list',
          method: 'get',
          params: this.listQuery
        }).then(({data}) => {
          this.tempGoodsCheck = [];
          this.tempPackageChecked = [];
          data.map(item => {
            item.tempProductBuyerRole = item.productBuyerRole.split(',');
            if(item.productType===1){
              this.tempGoodsCheck.push({
                id: item.productId,
                name: item.productName
              });
            }
            else if(item.productType === 2){
              this.tempPackageChecked.push({
                packageId: item.productId,
                name: item.productName
              })
            }
          });
          this.form.list = data;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.form.list = [];
          // this.form.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 选择商品
      chooseGoods(){
        this.checkGoods(this.tempGoodsCheck, -1, true).then(val => {
          this.tempGoodsCheck = val;
          let goodsList = this.form.list.filter(item => item.productType ===1);
          let selectVal = [];
          val.map(item => {
            selectVal.push({
              productId: item.id,
              productName: item.name
            });
          });
          let needDelGoods = differenceBy(goodsList, selectVal, 'productId');
          let needAddGoods = differenceBy(selectVal, goodsList, 'productId');

          needDelGoods.map(item => {
            let index = this.form.list.findIndex(subItem => subItem.productId === item.productId);
            if(index>=0){
              this.form.list[index].deleteFlag = 0;
            }
          });

          needAddGoods.map(item => {
            this.form.list.push({
              earnestMoneyProductFlag: 0,
              productType: 1,
              productId: item.productId,
              productName: item.productName,
              productPrice: '',
              deleteFlag: 1
            })
          });
        }).catch(err => {
          this.tempGoodsCheck = [];
        });
      },
      // 选择套餐
      chooseGoodsPackage(){
        this.checkPackage(this.tempPackageChecked).then(val => {
          this.tempPackageChecked = val;
          let packageList = this.form.list.filter(item => item.productType ===2);
          let selectVal = [];
          val.map(item => {
            selectVal.push({
              productId: item.packageId,
              productName: item.name
            });
          });
          let needDelPackage = differenceBy(packageList, selectVal, 'productId');
          let needAddPackage = differenceBy(selectVal, packageList, 'productId');

          needDelPackage.map(item => {
            let index = this.form.list.findIndex(subItem => subItem.productId === item.productId);
            if(index>=0){
              this.form.list[index].deleteFlag = 0;
            }
          });

          console.log(needAddPackage);
          needAddPackage.map(item => {
            console.log(item, this.form.list);
            this.form.list.push({
              earnestMoneyProductFlag: 0,
              productType: 2,
              productId: item.productId,
              productName: item.productName,
              productPrice: '',
              productBuyerRole: '1',
              tempProductBuyerRole: ['1'],
              upshelf: 1,
              isSell: 1,
              deleteFlag: 1
            })
          });
        }).catch(err => {
          this.tempPackageChecked = [];
        });
      },
      save(){
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false;
          }

          this.form.list.map(item => {
            if(item.earnestMoneyProductFlag){
              item.productBuyerRole = ''
            }
            else if(item.tempProductBuyerRole && item.tempProductBuyerRole.length){
              item.productBuyerRole = item.tempProductBuyerRole.join(',')
            }
          });
          this.btnLoading = true;
          this.request({
            url: '/bsnl-activity/storePartnerProduct/save',
            method: 'post',
            data: this.form.list
          }).then(() => {
            this.$message.success('保存成功');
            this.getList();
            this.btnLoading = false;
          }).catch(err => {
            this.btnLoading = false;
          });
        });
      }
    }
  }
</script>
<style lang="scss">
    .store-package-list{
        .header-container{
            padding-bottom: 24px;
        }
        .footer-container{
            padding-top: 24px;
            text-align: center;
        }
        .el-input-number--medium,
        .el-form .el-input {
            width: 100%;
        }
    }
</style>
